<template>
    <div class="nav">
        <li v-for="item in tabList" :key="item.link">
            <RouterLink :to="item.link" active-class="ative" class="noatvie">{{ item.name }}</RouterLink>
        </li>
    </div>
</template>

<script lang="ts">
import { defineComponent, ref} from 'vue'

export default defineComponent({
    setup(){
        // 定义导航数据和挑战链接
        const tabList= [
          { name: "首页", link: "/" },
          { name: "分类", link: "/classify" },
          { name: "榜单", link: "/list" },
          { name: "我的", link: "/personalCenter" }
    ];
        return{
            tabList
        }
    }
})

</script>

<style>
    .nav{
        display: flex;
        width: 100%;
        list-style: none;
        text-align: center;
        height: 50px;
        line-height: 50px;
        background-color: blanchedalmond;
    }
    .nav li{
        width: 150px;
    }
    .ative{
        text-decoration: none;
        outline: none;
        color: aliceblue;
    }
    .noatvie{
         text-decoration: none;
         outline: none;
         color: #000;
    }
    .nav li:hover{
        background-color: rgb(207, 207, 207);
    }
</style>